<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Polymer Lovefield Demo</title>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
  <link rel="import" href="olympia_query.html">

</head>
<body>
  <custom-style>
    <style is="custom-style" include="iron-flex iron-positioning"></style>
  </custom-style>

  <template is="dom-bind" id="demo">
      <style>
        .options {
          width: 200px;
        }
        .options > * {
          width: 100%;
        }
      </style>

      <iron-ajax auto url="../data/column_domains.json" last-response="{{columns}}" on-response="handleResponse"></iron-ajax>

      <olympia-query id="query"
          results="{{results}}"
          cities="{{cities}}"
          fromYear="{{fromYear}}"
          toYear="{{toYear}}"
          countries="{{countries}}"
          disciplines="{{disciplines}}"
          events="{{events}}"
          sports="{{sports}}"
          genders="{{genders}}"
          colors="{{colors}}"
          limit="{{limit}}">
      </olympia-query>

      <div class="layout horizontal fit">

        <div class="options">
          <div>Limit</div>
          <input type="number" value="{{limit::input}}">

          <template is="dom-repeat" items="{{columnsArray}}">
            <div>{{item.name}}</div>
            <select on-change="updatePredicate" name="{{item.name}}">
              <template is="dom-repeat" items="{{item.options}}" as="name">
                <option>{{name}}</option>
              </template>
            </select>
          </template>
          <br><br>
          <button on-tap="search">Search!</button>
        </div>

        <div flex>

         <template is="dom-repeat" items="{{results}}">
            <div>
              <template is="dom-repeat" items="{{_getColumns(results)}}" as="field">
                <span>{{_getCell(item,field)}}</span>| 
              </template>
            </div>
          </template>


        </div>

      </div>

  </template>

  <script>
     var app = document.querySelector('#demo');
     app.search = function() {
       this.$.query.search();
     };
     app.updatePredicate = function(e) {
       this[e.target.name] = e.target.value;
     };
     app._getColumns = function(results) {
       return Object.keys(this.results && this.results[0] || {});
     };
     app._getCell = function(item, field) {
       return item[field];
     };
     app.handleResponse = function(response) {
       var columns = [];
        Object.keys(this.columns).forEach(function(name) {
          options = this.columns[name];
          options.unshift('');
          if (name == 'years') {
            columns.push({name: 'fromYear', options: options});
            columns.push({name: 'toYear', options: options});
          } else {
            columns.push({name: name, options: options});
          }
        }, this);
        this.columnsArray = columns;
     };

  </script>


</body>
</html>
